import { Link } from "react-router-dom";
import { INews } from "@/types";

const HorizontalNews = ({ newList }: { newList: INews[] }) => {
    return (
        <>
            <div className="overflow-hidden overflow-x-auto flex items-center m-3 mt-5">
                {
                    newList.map(news => (
                        <Link to={`/detail/${news.id}`} key={news.id} state={{data: news}}>
                            <div key={news.id} className="flex flex-col items-start justify-start mr-3.5">
                                <div className="w-60 h-[256px] rounded-xl overflow-hidden">
                                    <img src={news.imageUrl} alt="news" className="w-full h-full object-cover" />
                                </div>
                                <div className="text-sm text-black font-bold mt-2">{news.title}</div>
                                <div className="text-sm text-gray-500 mt-2">{news.author}</div>
                            </div>
                        </Link>
                    ))
                }
            </div>
        </>
    )
}

export default HorizontalNews;